<template>
  <div class="my-course-container">
    <header v-if="!is_app">
      <i @click="JumpName('member')">
        <span class="icon-back"></span>
      </i>
      <span>我的课程</span>
    </header>
    <div class="course-list" v-show="list.length>0">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                :immediate-check="false"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item">
          <div class="item-img">
            <img :src="item.img_path+'w640'" alt="" v-if="item.is_compress==1">
            <img :src="item.img_path" alt="" v-else>
          </div>
          <div class="item-con">
            <div class="title">{{item.title}}</div>
            <div class="bottom-con">
              <div class="num">共{{item.count_num}}节课</div>
              <van-button class="more-btn" plain hairline round @click="JumpName('courseList',{item_id:item.item_id})">查看课程</van-button>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="no-data"
         v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
// import noDataImg from '@img/user/no-data.png'
import noData from '@/components/noData/index'
import { myCourses } from '@/api/user/member/memberApi'
import { openPage } from '@/utils/utils'

import Vue from 'vue'
export default Vue.extend({
  components: {
    noData
  },
  data() {
    return {
      is_app: false,
      noData: {
        text: '暂无课程',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-data.png',
        width: '214px',
        marginTop: '120px',
        txtMarginTop: '-30px'
      },
      list: [],
      loading: false,
      error: false,
      finished: false,
      // p: 2,
      listParams: {
        p: 1
      }
    }
  },
  methods: {
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    linkTo(url) {
      // TODO 小程序跳转处理
        openPage(url)
    },
    init(keyword, type = this.type) {
      this.listParams.keyword = keyword
      this.listParams.type = type
      this.listParams.p = 1
      this.list = []
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      myCourses(this.listParams).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          if (resData.list.length > 0) {
            this.list = resData.list
            this.listParams.p++
          } else {
            this.finished = true
          }

          // console.log(res)
        } else {
          this.$Error(res.msg)
        }
      })
    },

    // 加载更多
    onLoad() {
      myCourses(this.listParams).then(res => {
        this.loading = false
        if (res.data.list && res.data.list.length) {
          this.list.push(...res.data.list)
          this.listParams.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    }
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
    document.getElementsByTagName('body')[0].classList.remove('bg_white')
  },

  created() {
    this.init()
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  }
})
</script>
<style lang="scss">
@import "src/styles/mixin";
.my-course-container{
  header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    line-height: 88px;
    // background: ;
    text-align: center;
    font-size: 32px;
    color: #4b4b4b;
    background-color: #fff;
    i {
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 66px;
      height: 100%;
    }
    .icon-back {
      position: absolute;
      top: 50%;
      left: 20px;
      width: 20px;
      height: 40px;
      transform: translateY(-50%);
      background: url(https://img.wifenxiao.com/h5-wfx/images/user/icon_arrowBack.png) center/cover
      no-repeat;
    }
  }
  .course-list{
    padding:0 24px 24px 24px;
  }
  .item{
    display:flex;
    padding:24px 0;
    border-top:2px solid #EEEEEE;
    &:first-child{
      border-top:0;
    }
    .item-img{
      overflow:hidden;
      width:200px;
      height:116px;
      border-radius: 6px;
      img{
        display:block;
        width:100%;
      }
    }
    .item-con{
      flex:1;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left:20px;
      .title{
        @include lineClamp(26px,34px,2);
      }
    }
    .bottom-con{
      display:flex;
      justify-content: space-between;
      align-items:center;
      .num{
        color:#999;
      }
      .more-btn{
        height:42px;
        padding:0 20px;
        font-size:20px;
        border-color:#F21328;
        color:#F21328;
      }
    }
  }
}
</style>
